

<template>
<div>
     <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
     <Modal v-model="mode" width="50%"  title="用户编辑" @change="testChange"  @on-cancel="cancel">
         <Row>
          <Form ref="UserData"  :model="UserData"  :rules="ruleInUser" :label-width="100">
                <div style="width:100%;height:auto;margin:0 auto;">
                     <Col span="24">
                       <FormItem label="用户编号：" prop="Id">
                          <Input v-model="UserData.Id" class="orders_disabled" placeholder="请输入用户编号" disabled />
                       </FormItem>
                     </Col>
                    <Col span="12"> 
                      <FormItem label="用户名：" prop="UserName">
                        <Input v-model="UserData.UserName"  placeholder="请输入用户名"/>
                      </FormItem> 
                      <FormItem label="性别：" prop="Sex" >
                            <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
                            <Select v-model="UserData.Sex" placeholder="请选择性别" style="width:200px;">
                              <Option v-for="item in SexList" :value="item.Sex" :key="item.Sex">{{ item.SexName }}</Option>
                            </Select>
                      </FormItem> 
                     <FormItem label="微信：" prop="Wx">
                        <label slot="label">微&nbsp;&nbsp;&nbsp;&nbsp;信：</label>
                        <Input v-model="UserData.Wx" placeholder="请输入微信号"/>
                     </FormItem> 
                      <FormItem label="邮箱：" prop="Email">
                          <label slot="label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
                          <Input v-model="UserData.Email" placeholder="请输入邮箱"/>
                      </FormItem> 
                      <FormItem label="公司：" prop="Company" >
                          <label slot="label">公&nbsp;&nbsp;&nbsp;&nbsp;司：</label>
                          <Select v-model="UserData.Company" placeholder="请选择公司" style="width:200px;">
                            <Option v-for="item in CompanyList" :value="item.Id" :key="item.Id">{{ item.CompanyName }}</Option>
                          </Select>
                      </FormItem> 
                                                
                    </Col>

                    
                    <Col span="12">
                                              
                        <FormItem label="姓名：" prop="RealName"  >
                            <label slot="label">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                            <Input v-model="UserData.RealName" placeholder="请输入姓名" ></Input>
                        </FormItem>
                          <FormItem label="年龄：" prop="Age">
                              <label slot="label">年&nbsp;&nbsp;&nbsp;&nbsp;龄：</label>
                              <InputNumber v-model="UserData.Age" placeholder="请输入年龄" size="large"/>
                        </FormItem> 
                          <FormItem label="QQ号：" prop="Qq">
                              <label slot="label">Q&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
                              <Input v-model="UserData.Qq" placeholder="请输入QQ号"/>
                        </FormItem>     
                        <FormItem label="部门：" prop="Dept" >
                            <label slot="label">部&nbsp;&nbsp;&nbsp;&nbsp;门：</label>
                            <Select v-model="UserData.Dept" placeholder="请选择部门" style="width:200px;">
                              <Option v-for="item in DeptList" :value="item.Id" :key="item.Id">{{ item.DeptName }}</Option>
                            </Select>
                        </FormItem> 

                    </Col>

                    <Col span="24">
                        <FormItem label="备注：" prop="Remark">
                            <label slot="label">备&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
                            <Input v-model="UserData.Remark" style="width:500px;" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请说明备注事项..."/>
                         </FormItem>
                    </Col>
                    
                    <Col span="24">
                        <FormItem>
                            <Button type="primary" :loading="loading"  @click="handleSubmit('UserData')">提交</Button>
                            <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                         </FormItem>
                   </Col>
                   
                </div>
              </Form>
        </Row>


        <div slot="footer" >
            <!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
        </div>
    </Modal>
</div>
</template>

<script>
import {getCompanyList,getDeptList,updateUserData,getUserlist,getVehlist,subOrderData} from "@/api/data";
import { formatDate } from '../../components/date.js';
export default {
    name: 'UserEdit',
    data () {
        return {
          loading:false,
          mode:this.edit,
          
          //表单验证规则
          ruleInUser: {
            UserName: [
              { required: true, message: '请填写用户名', trigger: 'blur' }
            ],

            RealName: [
              { required: true, message: '请填写真实姓名', trigger: 'blur' }
            ],

            Sex: [
              { required: true, type:'number', message: '请选择性别', trigger: 'blur' }
            ],
                 
            Age: [
              { required: true, type:'number', message: '请输入年龄', trigger: 'blur' },
              { pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/, message: '请输入年龄0-120', trigger: 'blur' }
            ],

            Qq: [
              { pattern: /^[1-9][0-9]{4,}$/, message: '请输入正确的QQ号码', trigger: 'blur' }
            ],

            Email: [
              { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$$/, message: '邮箱格式不正确', trigger: 'blur' }
            ],

            Company: [
              { required: true, type:'number', message: '请选择公司', trigger: 'change' }
            ],

            Dept: [
              { required: true, type:'number', message: '请选择部门', trigger: 'blur' }
            ],


          },


           SexList:[
           
            {
              Sex:0,
              SexName:'男'
            },
            {
              Sex:1,
              SexName:'女'
            }
          ],

          DeptList:[
            {
              Id:1,
              DeptName:'研发部'
            },
            {
              Id:2,
              DeptName:'技术部'
            }
          ],
          CompanyList:[
            {
              Id:1,
              CompanyName:'奎木星'
            },
            {
              Id:2,
              CompanyName:'望远'
            }
          ],
          listdata:[]

        };
    },
    props:{
        edit:{
            type:Boolean ,
            required:true
        },
        UserData:{
            type:Object,
            required:true 
        },
        


    },
    methods: {
      testChange(val){
        this.$emit('testChange',val);
       },
      cancel(){
           this.loading = false; 
          let data = {
            mode:false
          }
          this.$emit('cancelCallBack', data);
       },
      //提交编辑后的userInfo
      handleSubmit(name) {
        
        this.$refs[name].validate(valid => { 
          console.log("提交验证：",valid)    
          if (valid) {  
            this.loading = true;      
            this.submit();
          } else {
            this.$Message.error("请填写相关信息!");
          }
        });
      },
    submit(){
        const data = {
            Id:this.UserData.Id,
            UserName: this.UserData.UserName,
            Password: "123456",
            RealName: this.UserData.RealName,
            Sex: this.UserData.Sex,
            Age: this.UserData.Age,
            Wx: this.UserData.Wx,
            Qq: this.UserData.Qq,
            Email: this.UserData.Email,
            Company: this.UserData.Company,
            Dept: this.UserData.Dept
    };
      updateUserData(data).then(res =>{
            if(res == "OK"){
              this.$Message.success("提交成功");
              this.loading = false; 
              let data = {
                mode:false
              }
              this.$emit('success', data);   
            }else if(response.data.flag == 0){
            this.$Message.success("提交失败"); 
            }else if(response.data.flag == 2){
            this.$Message.success("状态过期");
            }
        }).catch(error => {
            this.$Message.error("请核对之后重新提交1");
             this.loading = false; 
       });


     },
    },
    mounted () {
      const cmpdata = {
        fields:"Id,CompanyName",
        offset:"0",
        limit:"-1"
      };
      const dptdata = {
        fields:"Id,DeptName",
        offset:"0",
        limit:"-1"
      };
      //获得包含公司Id和companyname字段的全部列表
      getCompanyList(cmpdata).then(res =>{
        this.CompanyList = res.List;
        
      });
      //获得包含公司Id和companyname字段的全部列表
      getDeptList(dptdata).then(res =>{
        this.DeptList = res.List;
      });
    },
    watch: {
        edit(val) {
        this.mode = val
    }
}
}
</script>
<style>
.dept .ivu-select-placeholder{
color:#515a6e!important;
}
</style>